<template>  
  <div class="home">  
    <div class="text-items">  
      <TextItem v-for="item in list" :key="item.id" :data="item" />  
    </div>  
  
    <div class="end-divider">-END-</div>  
  </div>  
</template>  
  
<script setup>  
import TextList from '@/mock/textNews';  
import TextItem from '@/components/TextItem.vue';  
import { ref } from 'vue';  
const list = ref(TextList);  
</script>  
  
<style scoped>  
:root {  
  font-size: calc(1em + 0.2vw); 
  font-size-adjust: 0.58; 
  -webkit-text-size-adjust: 100%;   
}  
  
@media (max-width: 600px) {  
  :root {   
    font-size: 16px;  
  }  
}  
  
.home {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start; 
  justify-content: flex-start;  
  padding: 1.5rem; 
  box-sizing: border-box;  
  min-height: 100vh; 
  width: 94% ;  
  background-color: #ffffff; 
}  
  
.text-items {  
  flex: 1; 
  margin-bottom: 2rem; 
  overflow-y: auto; 
}  
  
.end-divider {  
  text-align: center;  
  font-size: 0.875rem;  
  margin-top: 1rem; 
  padding: 0.5rem;  
  border-top: 1px solid #ddd; 
  background-color: #fff;  
}  
    
.text-item {  
  margin-bottom: 1rem;  
  padding: 0.5rem; 
  border-radius: 0.25rem; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff; 
}  
</style>